<script setup>
import { onMounted, ref } from "vue";
import { Edit, Delete } from "@element-plus/icons-vue"; //导入图标
import ChannelSelect from "@/components/ChannelSelect.vue";
import articleApi from "@/api/article.js";
import { formatTime } from "@/utils/dateformat.js";
import DrawerEdit from "./components/DrawerEdit.vue";
// 存储表格数据
const articleList = ref([]);
const loading = ref(false);//loading效果

//删除逻辑
const onDeleteArticle = (row) => {
  console.log(row);
};

// 定义请求参数的对象
const params = ref({
  pagenum: 1, //当前页码
  pagesize: 5, //每页显示的条数
  cate_id: "", //分类id
  state: "", //状态绑定
});

//总条数
const total = ref(0);

// 基于params参数,获取文章列表数据
const getTabllist =  async () => {
  loading.value = true;
  const res = await articleApi.articleList(params.value);
  console.log(res);
  articleList.value = res.data.data;
  total.value = res.data.total;
  loading.value = false;
};
onMounted(() => {
  getTabllist();
})
//当前每页显示条数发生变化
const handleSizeChange = (size) => {
  console.log('当前页需要显示的条数发生变化了size:==' + size);
  //只要是每一页条数变化了，正在访问的当前页就没有意义了，重新请求数据
  params.value.pagenum = 1;
  params.value.pagesize = size;
  //基于最新的页码和最新的每页条数重新渲染
  getTabllist();
}
//当前页码发生变
const handleCurrentChange = (page) => {
  console.log('当前页码数发生变化了page:==' + page);
  params.value.pagenum = page;
  getTabllist();
}

//条件搜索 搜索逻辑 => 按照最新的条件，重新检索，从第一页开始展示
const onSearch = () => {
 params.value.pagenum = 1;
 getTabllist()
}
//重置搜索 将筛选条件清空，重新检索，从第一页开始展示
const onReset = () => {
  params.value.pagenum = 1;
  params.value.cate_id = '';
  params.value.state = '';
  getTabllist();
}

//绑定dom组件
const drawerEditRef = ref();
// 添加文章逻辑 新增
const onAddArticle = () => {
  drawerEditRef.value.open({})
}
// 编辑文章逻辑//编辑/修改
const onEditArticle = (row) => {
  drawerEditRef.value.open(row)
}

//添加或者是编辑成功之后，子组件通知当前父组件的回调emit
const onSuccess = (type) => {
  if(type === 'add'){
    //如果是添加，最好是渲染最后一页
    const lastPage = Math.ceil((total.value + 1) / params.value.pagesize);
    //跟新成最大页码数,再渲染
    params.value.pagenum = lastPage;
  }
  //如果是编辑，那么直接渲染当前页即可
  getTabllist()
}
</script>
<template>
  <!-- page-container自定义组件 -->
  <page-container title="文章管理">
    <!-- 自定义组件，并且向自定义组件中的solt插槽传入元素 -->
    <template #extra>
      <el-button type="primary" @click="onAddArticle">添加文章</el-button>
    </template>

    <!-- 表单区域 inline="true"一行显示的表单-->
    <el-form inline="true">
      <el-form-item label="文章分类">
        <!-- 通用下拉框组件 -->
        <!--Vue2中: v-model是 :value 和 @input的简写 -->
        <!--Vue3中: v-model是 :modelValue 和 @update:modelValue的简写 -->
        <!-- 如果我们  Vue3  v-model:cid  :cid 和 @update:cid 的简写 -->
        <ChannelSelect v-model="params.cate_id"></ChannelSelect>
      </el-form-item>

      <el-form-item label="发布状态">
        <el-select style="width: 150px" v-model="params.state">
          <!-- lable是展示给用户看的，value是提交给后台的值 -->
          <el-option label="已发布" value="已发布"></el-option>
          <el-option label="草稿" value="草稿"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格区域 -->
    <el-table :data="articleList" v-loading="loading">
      <el-table-column label="文章标题" prop="title">
        <!-- ementui提供的插槽 -->
        <template #default="{ row }">
          <!-- 这一列是一个超链接显示的，type="primary"默认是蓝色的，:underline="false"去掉下划线 -->
          <el-link type="primary" :underline="false">{{ row.title }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="分类" prop="cate_name"></el-table-column>
      <el-table-column label="发布时间" prop="pub_date">
        <!-- 处理时间格式,默认插槽 -->
        <template #default="{ row }">
          {{ formatTime(row.pub_date) }}
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="state"></el-table-column>
      <el-table-column label="操作">
        <!-- 插槽 -->
        <!-- 利用作用域插槽row,可以获取当前行的数据===> v-for 遍历 item row -->
        <template #default="{ row }">
          <el-button
            circle
            plain
            type="primary"
            :icon="Edit"
            @click="onEditArticle(row)"
          >
          </el-button>
          <el-button
            circle
            plain
            type="danger"
            :icon="Delete"
            @click="onDeleteArticle(row)"
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 element-plus分页插件pagination-->
    <el-pagination
      v-model:current-page="params.pagenum"
      v-model:page-size="params.pagesize"
      :page-sizes="[5, 10, 20, 30]"
      :size="5"
      :disabled="disabled"
      :background="true"
      layout="jumper, prev, pager, next, sizes, total,"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 20px; justify-content: center;"
    />


    <!-- drawer抽屉组件 -->
    <DrawerEdit ref="drawerEditRef" @success="onSuccess"></DrawerEdit>
  </page-container>
</template>
  
  <style lang="scss" scoped>
</style>